<template>
    <div class="header-container">
        <div class="header-left flex-box">
            <el-icon class="icon" size="20" @click="store.commit('collapsceMenu')">
                <Fold />
            </el-icon>
        </div>
        <div class="header-right">
            <el-dropdown>
                <div class="el-dropdown-link flex-box">
                    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                    <p class="user-name">admin</p>
                </div>
                <!-- <span class="el-dropdown-link ">
          Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span> -->
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>首页</el-dropdown-item>
                        <el-dropdown-item @click="logOut">退出</el-dropdown-item>
                        <!-- <el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
            <el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item> -->
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { useStore } from 'vuex';
import { logout } from '../api';
const router = useRouter()
const store = useStore()

const logOut = async () => {
    try {
        const res = await logout();  // 等待异步操作完成
        console.log(res);  // 输出注销结果
    } catch (error) {
        console.error("Logout failed:", error);  // 捕获错误并输出
    } finally {
        localStorage.removeItem("token");  // 清除存储的 token
        router.push('/login');  // 跳转到登录页面
    }
}

</script>
<style lang="less">
.flex-box {
    display: flex;
    align-items: center;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center; //靠边居中样式
    height: 100%;
    background-color: #fff;
    padding-right: 25px;

    .header-left {
        height: 100%;

        .icon {
            width: 45px;
            height: 100%;
        }

        .icon:hover {
            background-color: #f8f5f5;
            cursor: pointer;
        }
    }

    .header-right {
        .user-name {
            margin-left: 10px;
        }
    }
}
</style>